{% extends '../base.html' %}
{% block css %}
<link href="/static/css/examing.css" ref="stylesheet" />
<style>
  table{
    width: 700px;
    text-align: center;
    margin-left: 50px;
    margin-top: 50px;
    font-size: 20px;
    color: #666666;
  }
  tr {
    height: 80px;
  }
  th {
    background-color: #eeeeee;
  }

</style>
{% endblock css %}

{% block content %}
  <div id="experiment-head">
    <span>考试测评 > 考试详情</span>
  </div>
  {% if error_msg %}
  <div class="error_msg">
    <span>{{error_msg}}</span>
  </div>
  {% endif %}
  <div id="main-con" class="flex-row-between">
    <div>
      <div id='experiment-info' class="flex-row-between align-items-start">
        <div class="avatar-name">
          <img src="{{course.avatar_url}}" width=285 height=174 />
          <div class="flex-column-start experiment-name">
            <p class="title24">{{exam.exam_name}}</p>
            <p class="title18">{{exam.exam_describe|truncatewords:25}}</p>
            <div class="title18">
              <!-- {% if exam.course_name %}
              <span>{{exam.course_name}} | </span>
              {%endif%} -->
              <span>{{exam.teacher_name}}</span>
            </div>
          </div>
        </div>
        <div class="user-count flex-column-between">
          {% include '../components/experiment_user_count.html' with user_count=exam.student_count %}
          <div class="title18">
            时长：{{exam.duration}}分钟
          </div>
        </div>
      </div>
      <div class="experiment-con-head flex-row-start">
        <span class="head-tip"></span>
        <span class="title24">考试介绍</span>
      </div>
      <div id="experiment-intro">
        {{exam.exam_describe}}
      </div>
      <table>
        <tr>
          <th>题型</th>
          <th>单选题</th>
          <th>多选题</th>
          <th>判断题</th>
          <th>填空题</th>
          <th>简答题</th>
        </tr>
        <tr>
          <td>题量</td>
          <td>{{exam.mc|length}}</td>
          <td>{{exam.ma|length}}</td>
          <td>{{exam.tf|length}}</td>
          <td>{{exam.bl|length}}</td>
          <td>{{exam.sa|length}}</td>
        </tr>
      </table>
    </div>
    <div>
      {% include '../components/more_course.html' %}
      {% include '../components/more_experiment.html' %}
      {% include '../components/more_exam.html' %}
    </div>
  </div>
  <div id="buy-bar">
    <div>
      {% if choiced == 0%}
        {% if expired %}
        <span class="btn-disabled">考试已结束</span>
        {% else %}
        <span onclick=goUrl("{% url 'study:buyExam' pk=exam.id %}") >报名考试</span>
        {% endif %}
      {%else%}
        <!-- 考试未开始，考试已开始，考试已结束 -->
        {% if expired %}
        <span class="btn-diabled">考试已结束</span>
        {% elif started %}
          {% if submited %}
            <span onclick=goUrl("{% url 'study:paper' exam_id=exam.id %}") >查看详情</span>
          {% else %}
            <span onclick=goUrl("{% url 'study:examing' pk=exam.id %}") >继续考试</span>
          {% endif %}
        {%else%}
        <div>
          {% if exam.start_time %}
          <div>
            考试将于 <span id="cd-h"></span>小时<span id="cd-m"></span>分<span id="cd-s"></span>秒 后开始
          </div>
          {% endif %}
          <span onclick=goUrl("{% url 'study:buyExam' pk=exam.id %}") >开始考试</span>
        </div>
        {% endif %}
      {%endif%}
    </div>
  </div>
{% endblock content %}

{% block script %}
{% load static %}
<script src="{% static 'js/tools.js' %}" type="text/javascript"></script>
<script>
  var ts = {{start_ts}}
  function reverseTs() {
    var cd = countdown(ts)
    document.getElementById('cd-h').innerText = cd.h
    document.getElementById('cd-m').innerText = cd.m
    document.getElementById('cd-s').innerText = cd.s
  }
  if (document.getElementById('cd-h')) {
    interval = setInterval(reverseTs, 1000);
  }
</script>
{% endblock script %}
  